<template>
    <div class="pageCon">
        <div style="width: 100%;padding-bottom: 20px;display: flex;align-items: center;gap: 5px;">
            选择日期：<el-date-picker v-model="today" type="date" @change="dateChange" />
            往后三十一天的菜品安排
        </div>
        <el-table :data="dateList" style="width: 90%" @row-click="handleRowClick" border>
            <el-table-column prop="date" label="日期" width="200px"></el-table-column>
            <el-table-column prop="breakfast" label="早餐">
                <template #default="scope">
                    <span
                        v-if="dateDish[scope.row.date.split(' ')[0]] && dateDish[scope.row.date.split(' ')[0]].breakfast.length">
                        <span v-for="dish in dateDish[scope.row.date.split(' ')[0]].breakfast" :key="dish.id">
                            <span class="dishName">{{ dish.name }}、</span>
                        </span>
                    </span>
                    <div v-else>暂无菜品信息</div>
                </template>
            </el-table-column>
            <el-table-column prop="lunch" label="午餐">
                <template #default="scope">
                    <span
                        v-if="dateDish[scope.row.date.split(' ')[0]] && dateDish[scope.row.date.split(' ')[0]].lunch.length">
                        <span v-for="dish in dateDish[scope.row.date.split(' ')[0]].lunch" :key="dish.id">
                            <span class="dishName">{{ dish.name }}、</span>
                            <!-- 间隔 -->
                        </span>
                    </span>
                    <div v-else>暂无菜品信息</div>
                </template>
            </el-table-column>
            <el-table-column prop="dinner" label="晚餐">
                <template #default="scope">
                    <span
                        v-if="dateDish[scope.row.date.split(' ')[0]] && dateDish[scope.row.date.split(' ')[0]].dinner.length">
                        <span v-for="dish in dateDish[scope.row.date.split(' ')[0]].dinner" :key="dish.id">
                            <span class="dishName">{{ dish.name }}、</span>
                            <!-- 间隔 -->
                        </span>
                    </span>
                    <div v-else>暂无菜品信息</div>
                </template>
            </el-table-column>
            <el-table-column>
                <template #default="scope">
                    <el-button style="margin-left: 10px;" type="primary"
                        @click="setDateDish(scope.row.date.split(' ')[0], dateDish[scope.row.date.split(' ')[0]])">
                        编辑菜谱</el-button>
                </template>
            </el-table-column>
            <el-table-column>
                <template #default="scope">
                    <div style="font-size: 20px;" v-if="dateDish[scope.row.date.split(' ')[0]]">
                        <div>早餐：{{ dateDish[scope.row.date.split(' ')[0]]?.count.breakfast }}份</div>
                        <div>午餐：{{ dateDish[scope.row.date.split(' ')[0]]?.count.lunch }}份</div>
                        <div>晚餐：{{ dateDish[scope.row.date.split(' ')[0]]?.count.dinner }}份</div>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="编辑菜谱" v-model="dialogVisible" destroy-on-close>
            <el-form>
                <el-form-item label="早餐">
                    <!-- remote -->
                    <!-- :remote-method="getDishOptions" -->
                    <el-select v-model="breakfast" multiple filterable placeholder="请选择">
                        <el-option v-for="item in dishOptions" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="午餐">
                    <el-select v-model="lunch" multiple filterable placeholder="请选择">
                        <el-option v-for="item in dishOptions" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="晚餐">
                    <el-select v-model="dinner" multiple filterable placeholder="请选择">
                        <el-option v-for="item in dishOptions" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm()">提交</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- <el-dialog title="预约详情" v-model="detailVisible" destroy-on-close width="400px">
            <el-table :data="userDetail" style="width: 100%">
                <el-table-column prop="name" label="姓名" width="180" />
                <el-table-column prop="jobNumber" label="工号" width="180" />
            </el-table>
            <el-pagination background :page-size="pageSize" layout="prev, pager, next" :total="userTotal"
                @current-change="handleCurrentChange" />
        </el-dialog> -->

    </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import { Api } from '@/api'
import { ElMessage } from 'element-plus'

const today = ref(new Date()) // 获取今天的日期
const endDay = ref(new Date(today.value.getTime() + 30 * 24 * 60 * 60 * 1000)) // 获取今天到7天后的日期
const weekenum = ['日', '一', '二', '三', '四', '五', '六']
const activeDay = ref('') // 当前选中的日期
const dateList = ref([]) // 存储从今天开始往后七天的日期列表
const dateDish = ref({}) // 存储每天的菜品数据

// 获取today到endDay的日期列表
const getDateList = () => {
    const dateListValue = []
    for (let i = 0; i < 31; i++) {
        // yyyy-mm-dd 星期x
        const date = new Date(today.value.getTime() + i * 24 * 60 * 60 * 1000)
        const year = date.getFullYear()
        const month = (date.getMonth() + 1).toString().padStart(2, '0') // 月份需要补零
        const day = date.getDate().toString().padStart(2, '0') // 日期需要补零
        const week = weekenum[date.getDay()]
        dateListValue.push({ date: `${year}-${month}-${day} 星期${week}` })
    }
    activeDay.value = dateListValue[0].date
    return dateListValue
}


const getDateDish = () => {
    dateList.value = getDateList()
    Api.getDateRangeDish({ firstDay: today.value.toISOString().split('T')[0], lastDay: endDay.value.toISOString().split('T')[0] }).then(res => {
        dateDish.value = res.data
    })
}
onMounted(() => {
    getDateDish()
    getDishOptions()
})
const dateChange = () => {
    dateList.value = getDateList()
    getDateDish()
}
const handleRowClick = (row) => {
    activeDay.value = row.date
    // 可以在这里添加其他处理逻辑
}
const dialogVisible = ref(false)
const dishOptions = reactive([])
const breakfast = ref([])
const lunch = ref([])
const dinner = ref([])
const editDate = ref('')
const getDishOptions = () => {
    Api.getDishList({ page: 1, pageSize: 99999, name: '' }).then(res => {
        const tempArray = res.data.map(item => {
            return {
                value: item.id,
                label: item.name
            }
        })
        dishOptions.push(...tempArray)
    })
}
const setDateDish = (day, item) => {
    if (!item) {
        item = {
            breakfast: [],
            lunch: [],
            dinner: []
        }
    }
    editDate.value = day;
    breakfast.value = item.breakfast.map(i => i.id)
    lunch.value = item.lunch.map(i => i.id)
    dinner.value = item.dinner.map(i => i.id)
    dialogVisible.value = true
}

const submitForm = () => {
    console.log(breakfast, lunch, dinner);
    Api.addDateDish({
        //日期格式化yyyy-MM-dd
        date: editDate.value,
        dishes: {
            breakfast: breakfast.value,
            lunch: lunch.value,
            dinner: dinner.value
        }
    }).then(res => {
        console.log(res);
        if (res.status === 200) {
            ElMessage({
                message: res.message,
                type: 'success'
            })
            dialogVisible.value = false
            getDateDish()
        }
    })
}
</script>

<style scoped lang="scss">
.pageCon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .dishCard {
        display: flex;
        align-items: center;
        border: 1px solid #ebeef5;
        padding: 10px;
        box-sizing: border-box;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

        .dishImg {
            width: 150px;
            height: 150px;
            margin: 0 auto;
        }

        .inf {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            height: 100px;
            width: 100px;
            margin: 0 auto;

            .dishName {
                font-size: 18px;
                font-weight: 600;
            }

            .dishPrice {
                font-size: 16px;
                color: #ff0000;
            }
        }
    }
}
</style>